import React from 'react';
import ReactDOM from 'react-dom';
import { SwiperBox, Picture, Price, ModalWrap } from '@/design';
import styles from './goodsModal.less';


export default function CGoodsModal(props: any) {
  const { goodsDetail: { productName, productDesc, productPrice, monthSaleAmount } } = props;
  let result =  (
    <>
      <div className={styles.modal_bg}></div>
      <div className={styles.goods_modal_main}>
        <div className={styles.banner_holder} ref={props.swiperRef}>
          <SwiperBox
            ikey="id"
            data={props.banners}
            wrapClass={styles.index_banner}
            dotsClass={styles.banner_dots}
            renderRow={(item: string, index: number) => (
              <Picture
                setRef={props.swiperRef.current}
                className={styles.banner_item}
                key={index}
                src={item}
              />
            )}
          />
        </div>
        <div className={styles.goods_detail_info}>
          <div>
            <p >{productName}</p>
            <div className={styles.price}><Price price={productPrice}></Price></div>
          </div>
            <div className={styles.month_sale}>月售{monthSaleAmount}</div>
            {productDesc && <div>{productDesc}</div>}

        </div>
        <div className={styles.goods_detail_add_cart_btn}>加入購物車</div>
      </div>
      <span className={styles.modal_close_icon} onClick={props.onClose}></span>
    </>
  );
  return ReactDOM.createPortal(result, document.body);
}

